<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="screen-orientation" content="portrait" />
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <title>礼品详情</title>
    <link rel="stylesheet" href="css/element_2.4.7.css"/>
    <link rel="stylesheet/less" href="css/common.less"/>
</head>
<body>
    <div id="app">
        <!--顶部-->
        <div class="top">
            <span>爱健康&nbsp;&nbsp;爱生活</span>
            <a href="javascript:history.go(-1);" class="return">
                <span class="return-arrow"></span>
                <span>返回&nbsp;关闭</span>
            </a>
            <a href="#" class="oprate"></a>
        </div>

        <!--头部标题-->
        <div class="head">{{headTitle}}</div>

        <!--主要内容-->
        <div class="content" id="gift_info_sos">
            <!--banner图-->
            <div class="banner">
                <el-carousel trigger="click" arrow="always">
                    <el-carousel-item v-for="banner in banner">
                        <a :style="banner.style"></a>
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="content_block">
                <div class="gift-info-block" v-for="info in giftInfo">
                    <p class="gift-info-title">
                        <span>{{info.title}}</span>
                    </p>
                    <div class="gift-info-content" v-html="info.contentHtml"></div>
                </div>

                <a class="foot-btn" href="javascript:history.go(-1);">返回</a>
            </div>
        </div>
    </div>
</body>

<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false,
        rootpath: ":/a.com/"
    };
</script>
<script src="js/less.js"></script>
<script src="js/common.js"></script>
<!-- import Vue before Element -->
<script src="js/vue_2.5.17.js"></script>
<!-- import JavaScript -->
<script src="js/element_2.4.7.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                headTitle:'礼品详情',//标题
                banner:[//banner图
                    {
                        style:{
                            background:'url("image/sos-img.png") center no-repeat',
                            backgroundSize:'cover'
                        }
                    },
                    {
                        style:{
                            background:'url("image/sos-img.png") center no-repeat',
                            backgroundSize:'cover'
                        }
                    }
                ],

                giftInfo:[//列表数据
                    {
                        title:'温馨提示',
                        contentHtml:'<p>国际SOS紧急救援服务简介<br/>1、国际SOS紧急救援服务是由中英人寿保险有限公司联手国际紧急救援服务提供商国际SOS为客户提供。<br/>2、享受SOS服务的客户年龄需为18周岁（含）以上、70周岁（不含）以下。<br/>3、服务生效时间为成功申请后次日0时起，服务期限为90天且单次旅行不超过30天。</p>'
                    },
                    {
                        title:'国际SOS紧急救援服务简介',
                        contentHtml:'<p>特别提示您注意：国际SOS紧急救援服务对服务内容和服务费用限额均有相关细则和除外责任，了解详细服务内容及限额请点击。如有疑问，欢迎致电中英人寿客服热线：95545。</p>'
                    }
                ]
            }
        }
    });

</script>

</html>